<template>
	<page-meta :page-style="'overflow:' + (isShowPopup ? 'hidden' : 'visible')"></page-meta>
	<view class="page-container bg-grey" v-if="scenicData">
		<!-- 导航栏 -->
		<up-navbar :title="scenicData.name" fixed safeAreaInsetTop @left-click="pageBack"></up-navbar>

		<zjy-sticky-tab :tabs="tabs" :scrollTop="scrollTopVal" v-model="showStickyTab" ref="onTabRef"></zjy-sticky-tab>
		<view
			class="mt-16"
			:style="{
				paddingTop: `calc(${statusBarHeight + navbarHeight}px)`,
			}"
		>
			<!-- 开放时间 -->
			<view
				id="opening-time"
				class="detail-card opening-time"
				:style="{ marginTop: showStickyTab ? `88rpx` : '' }"
			>
				<view class="title flex-ae">
					<view class="flex-a-baseline">
						<view class="title-left">开放时间</view>
						<view class="divider fs-24"></view>
						<view class="c-grey-86 fs-24 font-normal" :class="{ 'c-green': scenicData.opening }">
							{{ scenicData.opening_name }}
						</view>
					</view>
				</view>
				<view class="opening-time-content">
					<!-- 建议游玩时间 -->
					<view class="flex-a mb-20 fs-28 c-grey-4e">
						<image :src="imgBaseUrl + 'icon-wind.png'" class="icon-32 mr-12" />
						<text class="label">建议游玩时间：</text>
						<text class="value">{{ scenicData.suggest_tour_time_desc }}</text>
					</view>

					<!-- 最佳游玩时间 -->
					<view class="flex-a mb-20 fs-28 c-grey-4e">
						<image :src="imgBaseUrl + 'icon-car.png'" class="icon-32 mr-12" />
						<text class="label">最佳游玩时间：</text>
						<text class="value">{{ scenicData.best_tour_time_desc }}</text>
					</view>

					<!-- 开放时间列表 -->
					<view class="time-list pt-32" v-if="scenicData.business_times.length">
						<!-- 常规时间段 -->
						<view class="time-item" v-for="(item, index) in scenicData.business_times" :key="index">
							<view class="date">{{ parseDate(item.start_date) }}-{{ parseDate(item.end_date) }}</view>
							<view class="open-time">
								{{ parseOpenTime(item.week_days) }}
								{{ subString(item.start_time, 5, false) }}-{{ subString(item.end_time, 5, false) }} 开放
								({{ subString(item.stop_entry_time, 5, false) }}
								停止入园)
							</view>
						</view>
					</view>
					<!-- 底部提示 -->
					<view class="flex-a pt-24 c-grey-86">
						<image :src="imgBaseUrl + 'icon-tip.png'" class="icon-24 mr-8" />
						<text class="tips-text">以上信息为当地时间，仅供参考，具体以当日公示为准</text>
					</view>
				</view>
			</view>
			<!-- 门票价格实拍 -->
			<view id="price-photo" class="detail-card price-photo">
				<view class="title">
					<view class="title-left">门票价格实拍图</view>
				</view>
				<view class="price-photo-content">
					<!-- 图片 -->
					<view class="img-wrapper">
						<image :src="scenicData.price_photo_url" mode="widthFix" class="photo" />
					</view>

					<!-- 底部说明 -->
					<view class="c-grey-86">
						<view class="update-time">
							<image :src="imgBaseUrl + 'icon-tip.png'" class="icon-24 mr-10" />
							<text class="time">图片更新时间:{{ dataToDate(scenicData.price_photo_update_time) }}</text>
						</view>
						<view class="ml-34 mt-8">以上信息仅供参考，具体以景点当日实际公告信息为准</view>
					</view>
				</view>
			</view>
			<!-- 优待政策  -->
			<view
				id="preferential-treatment"
				class="detail-card preferential-treatment"
				v-if="scenicData.display_preferential_policies.length"
			>
				<view class="title">
					<view class="title-left">优待政策</view>
				</view>
				<view class="apply-table">
					<view class="table-header">
						<view class="col col-144">适用人群</view>
						<view class="col col-condition">适用条件</view>
						<view class="col col-144">优待政策</view>
					</view>

					<!-- 儿童 -->
					<view
						class="table-row"
						v-for="(item, index) in scenicData.display_preferential_policies"
						:key="index"
					>
						<view class="col col-144">{{ item.name }}</view>
						<view class="flex-col flex-1" v-if="item.type_groups.length > 1">
							<view class="flex-a mul-tr" v-for="(typeGroup, index) in item.type_groups" :key="index">
								<view class="col col-condition">
									<text v-for="(condition, index) in typeGroup.conditions" :key="index">
										{{ condition }}
									</text>
								</view>
								<view class="col col-144" style="height: 100%">
									{{ typeGroup.type_name }}
								</view>
							</view>
						</view>
						<template v-else>
							<view class="col col-condition flex-col">
								<view class="" v-for="(str, index) in strToArray(item.type_groups[0]['conditions'][0])">
									{{ str }}
								</view>
							</view>
							<view class="col col-144">{{ item.type_groups[0]["type_name"] }}</view>
						</template>
					</view>
				</view>
			</view>
			<!-- 图文详情 -->
			<view id="image-text" class="detail-card image-text">
				<view class="title">
					<view class="title-left">图文详情</view>
				</view>
				<up-parse :content="scenicData.description" @ready="ready" lazyLoad="false"></up-parse>
			</view>
			<!-- 服务设施 -->
			<view id="service-facilities" class="detail-card service-facilities" v-if="scenicData.facilities.length">
				<view class="title">
					<view class="title-left">服务设施</view>
				</view>
				<view class="apply-table">
					<view class="table-header">
						<view class="col col-144">设施名称</view>
						<view class="col col-condition">说明</view>
					</view>

					<!-- 停车场 -->
					<view class="table-row" v-for="(item, index) in scenicData.facilities" :key="index">
						<view class="col col-144">{{ item.title }}</view>
						<view class="col col-condition flex-col flex-a-start">
							<view v-for="(str, index) in strToArray(item.content)" :key="index">
								{{ str }}
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 其他信息 -->
			<view
				id="little-title"
				class="detail-card little-title"
				v-if="scenicData.other_infos.length"
				v-for="(item, index) in scenicData.other_infos"
			>
				<view class="title">
					<view class="title-left">{{ item.title }}</view>
				</view>
				<view class="facility-desc">
					<view class="desc-item" v-for="(other, index) in strToArray(item.content)" :key="index">
						<view class="dot"></view>
						<text class="text">{{ other }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { onLoad, onPageScroll } from "@dcloudio/uni-app"
import useCommonStore from "@/store/common"
import { pageBack } from "@/utils/page-redirect"
import { $getScenicDetail } from "@/api/hy/scenic"
import ZjyStickyTab from "@/components/zjy-sticky-tab.vue"
import { dataToDate, subString } from "@/mixins/mixins"
import { WeekDayName } from "@/constants/common"
import dayjs from "dayjs"
import { throttle } from "lodash"

const { statusBarHeight, navbarHeight } = useCommonStore()
const imgBaseUrl = inject("imgBaseUrl")

const id = ref("")
const showStickyTab = ref(true)
const scenicData = ref(null)
const onTabRef = ref(null)

const tabs = [
	{ id: "opening-time", name: "开放时间" },
	{ id: "price-photo", name: "门票价格实拍" },
	{ id: "preferential-treatment", name: "优待政策" },
	{ id: "image-text", name: "图文详情" },
	{ id: "service-facilities", name: "服务设施" },
	{ id: "little-title", name: "其他信息" },
]

const waitTimeout = ref(true)
const isShowPopup = computed(() => {
	return waitTimeout.value
})
// 倒计时不让页面滚动
setTimeout(() => {
	waitTimeout.value = false
}, 2000)
const parseDate = (dateStr) => {
	return dayjs(dateStr).format("MM月DD日")
}

const parseOpenTime = (dates) => {
	const days = dates.map(Number).sort((a, b) => a - b)
	const result: string[] = []
	let startDay = days[0]
	let endDay = days[0]

	for (let i = 1; i < days.length; i += 1) {
		// 判断是否连续时间
		if (days[i] === days[i - 1] + 1) {
			endDay = days[i] // 如果连续，则更新结束日期为当前日期
		} else {
			// 如果不连续，首先根据起始日期和结束日期的情况进行处理。如果它们相等，说明只有一个日期
			if (startDay === endDay) {
				result.push(WeekDayName[startDay])
			} else {
				// 如果它们不相等，说明有连续的日期
				result.push(`${WeekDayName[startDay]}至${WeekDayName[endDay]}`)
			}
			startDay = endDay = days[i]
		}
	}

	if (startDay === endDay) {
		result.push(WeekDayName[startDay])
	} else {
		result.push(`${WeekDayName[startDay]}至${WeekDayName[endDay]}`)
	}

	return result.join("、")
}

const ready = () => {
	waitTimeout.value = false
	if (onTabRef.value) onTabRef.value.calculateTabPositions()
}

onLoad(async (option = {}) => {
	id.value = option.id

	$getScenicDetail(id.value).then((res) => {
		scenicData.value = res
	})
})
const strToArray = (str: string) => {
	return str.split("\n")
}
const scrollTopVal = ref(0)

onPageScroll(
	throttle((e: any) => {
		scrollTopVal.value = e.scrollTop
	}, 300)
)
</script>

<style scoped lang="scss">
.detail-card {
	width: 100%;
	padding: 32rpx 24rpx;
	background: #fff;
	margin-bottom: 16rpx;
	border-radius: 16rpx;
}

.title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 24rpx;

	.title-left {
		font-size: 36rpx;
		color: #000;
		font-weight: 600;
	}

	.divider {
		width: 1rpx;
		height: 24rpx;
		margin: 0 8rpx;
		background: linear-gradient(to bottom, #e9eaee, #e9eaee);
	}

	.title-right {
		height: 100%;
		display: flex;
		align-items: flex-end;

		.text {
			font-size: 24rpx;
			font-weight: normal;
			color: #787a7f;
		}

		image {
			width: 16rpx;
			height: 16rpx;
			margin-left: 4rpx;
			transform: translateY(-8rpx);
		}
	}
}

.introduce,
.preferential-treatment {
	:deep(.u-read-more__toggle) {
		background: linear-gradient(
			180deg,
			rgba(255, 255, 255, 0) 0%,
			rgba(255, 255, 255, 0.8) 39%,
			#ffffff 89%
		) !important;

		.u-read-more__toggle__text {
			width: 164rpx;
			height: 64rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background: rgba(255, 255, 255, 0.6);
			box-sizing: border-box;
			border: 1px solid #e5e6eb;
			border-radius: 32rpx;

			.u-text {
				margin: 0 !important;
				flex: 0 1 auto !important;
				width: max-content !important;

				.u-text__value {
					font-size: 24rpx !important;
					color: #1d2129 !important;
				}
			}

			.u-read-more__toggle__icon {
				.u-icon {
					text {
						font-size: 24rpx !important;
						color: #1d2129 !important;
					}
				}
			}
		}
	}
}

.price-instructions {
	margin-bottom: 0;
	.price-instructions-content {
		line-height: 48rpx;
		color: #4e5969;
	}
}
.image-text {
}
.comment-on {
	.comment-on-content {
		width: 100%;
		display: flex;
		flex-direction: column;
		gap: 12rpx;
		.view-all {
			margin: 48rpx auto 0;
			width: 240rpx;
			height: 64rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 24rpx;
			color: #1d2129;
			border: 1px solid #e5e6eb;
			border-radius: 32rpx;
			background-color: #fff;
			image {
				width: 16rpx;
				height: 16rpx;
				margin-left: 8rpx;
			}
		}
	}
}

.opening-time {
	.opening-time-content {
		background: #fff;
		border-radius: 12rpx;

		.time-list {
			border-radius: 8rpx;
			display: flex;
			flex-direction: column;
			gap: 24rpx;

			.time-item {
				font-size: 24rpx;
				font-weight: normal;

				.date {
					width: 100%;
					height: 80rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #1d2129;
					background: #f8f8f9;
					border: 1rpx solid #e9eaee;
					box-sizing: border-box;
					border-radius: 16rpx 16rpx 0 0;
				}

				.open-time {
					width: 100%;
					height: 80rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					background: #fff;
					border-radius: 0 0 16rpx 16rpx;
					border: 1rpx solid #e9eaee;
					border-top: none;
				}
			}
		}
	}
}

.price-photo {
	.price-photo-content {
		.img-wrapper {
			width: 100%;
			border-radius: 16rpx;
			overflow: hidden;
			margin-bottom: 24rpx;

			.photo {
				width: 100%;
				display: block;
			}
		}
	}
}

.apply-table {
	background: #f8f8f9;
	border: 1rpx solid #e9eaee;
	border-radius: 12rpx;
	overflow: hidden;

	.table-header {
		display: flex;
		background: #f8f8f9;
		font-size: 24rpx;
		font-weight: 400;
		color: #86909c;

		.col {
			display: flex;
			justify-content: center;
			align-items: center;
			border-bottom: 1rpx solid #e9eaee;
			padding: 24rpx;

			&.col-condition {
				flex: 1;
				text-align: center;
				border-left: 1rpx solid #e9eaee;
				border-right: 1rpx solid #e9eaee;
			}

			&.col-144 {
				width: 144rpx;
			}
		}
	}

	.table-row {
		display: flex;
		font-size: 24rpx;
		background: #fff;

		&:last-child {
			.col {
				border-bottom: none;
			}
		}

		.col {
			display: flex;
			justify-content: center;
			align-items: center;
			border-bottom: 1rpx solid #e9eaee;
			padding: 24rpx;

			&.col-condition {
				flex: 1;
				border-left: 1rpx solid #e9eaee;
				border-right: 1rpx solid #e9eaee;
			}

			&.col-144 {
				width: 144rpx;
			}
		}
		.flex-a-start {
			align-items: flex-start;
		}
	}
}

.little-title {
	.facility-desc {
		.desc-item {
			display: flex;
			margin-bottom: 20rpx;

			&:last-child {
				margin-bottom: 0;
			}

			.dot {
				width: 10rpx;
				height: 10rpx;
				border-radius: 50%;
				background: $c-grey-e5;
				margin-top: 16rpx;
				margin-right: 12rpx;
			}

			.text {
				flex: 1;
				font-size: 14px;
				color: $c-grey-4e;
				line-height: 1.5;
			}
		}
	}
}
.mul-tr {
	position: relative;
	&:before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border-bottom: 1rpx solid #e9eaee;
	}
	&:last-child:before {
		border-bottom: none;
	}
}
</style>
